﻿@model NFine.Domain._03_Entity.InformationCenter.NavigationImageEntity
@{
    ViewBag.Title = "导航图片设置";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<link href="~/Content/js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="~/Content/js/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<style>
    
    .closeLayer{
    z-index: 99;
    position:absolute; /*绝对定位*/

    left:148px; /*位置自己看着调整，在图片上方*/

    top:-2px; 

    }
</style>
<form id="form1">
      <table class="form" style="width:auto">
           
                 <tr>
                    <th class="formTitle" style="padding-bottom:15px">轮播图片：</th>
                    <td class="formValue">
                        <input id="file_upload" name="file_upload" type="file" multiple="multiple"> 
                        <input id="F_Image1" name="F_Image1" type="hidden" value="@Model.F_Image1">
                        <input id="F_Image2" name="F_Image2" type="hidden" value="@Model.F_Image2">
                        <input id="F_Image3" name="F_Image3" type="hidden" value="@Model.F_Image3">
                        <input id="F_Image4" name="F_Image4" type="hidden" value="@Model.F_Image4">
                        <input id="F_Image5" name="F_Image5" type="hidden" value="@Model.F_Image5">
                    </td>
                </tr>
                <tr>
                    <th class="formTitle"></th>
                    <td class="formValue" id="tdImage">
                      @*  @{
                            var str="/Content/img/imgdefalt.jpg";
                            if(!string.IsNullOrEmpty(Model.F_Image1))
                            {
                                str=Model.F_Image1;
                            }
                            }
                           <img src="@str" width="150" height="150" id="pic_view" />*@
                         <div class="row">
                      <div class="col-xs-2" >
                        <img src="/Content/img/imgdefalt.jpg" width="150" height="100" id="pic_view1" class="a" />
                           <div class="closeLayer"   id="div1" onClick="javascript:delcfm(1)" href="#" hidden >
                                    <img  src="~/Content/img/delete.gif" >
                           </div>
                      </div>
                     <div class="col-xs-2" style="margin-left:20px">
                         <img src="/Content/img/imgdefalt.jpg" width="150" height="100" id="pic_view2" class="a" />
                         <div class="closeLayer"  onClick="delcfm(2)" href="#" id="div2" hidden>
                                    <img  src="~/Content/img/delete.gif">
                           </div>
                     </div> 
                     <div class="col-xs-2"  style="margin-left:20px">
                         <img src="/Content/img/imgdefalt.jpg" width="150" height="100" id="pic_view3" class="a"/>
                          <div class="closeLayer"  onClick="delcfm(3)" href="#" id="div3" hidden>
                                        <img  src="~/Content/img/delete.gif">
                         </div>
                       </div>  
                      <div class="col-xs-2"  style="margin-left:20px">
                             <img src="/Content/img/imgdefalt.jpg" width="150" height="100" id="pic_view4" class="a"/> 
                              <div class="closeLayer"  onClick="delcfm(4)" href="#" id="div4" hidden>
                                            <img  src="~/Content/img/delete.gif">
                                   </div> 
                       </div>
                         <div class="col-xs-2"  style="margin-left:20px">
                             <img src="/Content/img/imgdefalt.jpg" width="150" height="100" id="pic_view5" class="a"/> 
                              <div class="closeLayer"  onClick="delcfm(5)" href="#" id="div5" hidden>
                                            <img  src="~/Content/img/delete.gif">
                             </div>
                        </div>
                    </div>
                    </td>
                </tr>
                <tr>
                    <th class="formTitle"></th>
                    <td class="formValue">
                        <input type="button" id="btnSub" class="btn btn-primary" value="设 置" onclick="submitForm()"/>
                    </td>
                </tr>
      </table>
 </form>
<script>
    $(function () {
        //图片
        if( "@Model.F_Image1"!=""){
            $("#pic_view1" ).attr("src", "@Model.F_Image1");
            $("#div1").show();
        }
        if ("@Model.F_Image2" != "") {
            $("#pic_view2").attr("src", "@Model.F_Image2");
             $("#div2").show();
        }
        if ("@Model.F_Image3" != "") {
            $("#pic_view3").attr("src", "@Model.F_Image3");
             $("#div3").show();
        }
        if ("@Model.F_Image4" != "") {
            $("#pic_view4").attr("src", "@Model.F_Image4");
             $("#div4").show();
        }
        if ("@Model.F_Image5" != "") {
            $("#pic_view5").attr("src", "@Model.F_Image5");
             $("#div5").show();
         }

        $('#file_upload').uploadify({
            'swf': '/Content/js/uploadify/uploadify.swf',  //FLash文件路径
            'buttonText': '浏  览',                                 //按钮文本
            'uploader': '/Messages/Upload',                       //处理文件上传Action
            'queueSizeLimit': 10,                          //队列最多可上传文件数量，默认为999
            'auto': true,                                 //选择文件后是否自动上传，默认为true
            'multi': false,                                 //是否为多选，默认为true
            'removeCompleted': true,                       //是否完成后移除序列，默认为true
            'fileSizeLimit': '10MB',                       //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
            'fileTypeDesc': 'Image Files',                 //文件描述
            'fileTypeExts': '*.gif; *.jpg; *.png; *.bmp',  //上传的文件后缀过滤器
            'onQueueComplete': function (event, data) {                 //所有队列完成后事件

            }, 'onUploadStart': function (file) {
                $("#file_upload").uploadify("settings", 'formData', { 'folder': 'Navigation' }); //动态传参数
            },
            'onUploadError': function (event, queueId, fileObj, errorObj) {
               
            },
            'onUploadSuccess': function (file, data, response) {
               
                var arr = data.split('{');
                $("#tdImage img[class='a']").each(function (index) {
                    if ($(this).attr("src") == "/Content/img/imgdefalt.jpg") {
                        $(this).attr("src", "/UploadFiles/Navigation/" + arr[0]);
                        $("#div" + (index + 1)).show();
                        $("#F_Image" +( index+1)).val("/UploadFiles/Navigation/"+arr[0]);
                         
                        return false;
                    }
                });
            }
        });
    });
    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        $.submitForm({
            url: "/Messages/SubmitFormImage",
            param: $("#form1").formSerialize(),
            success: function () {
                $.reload();
            }
        });
    }
    //删除上传的图片
    function delcfm(index) {
       
            $("#pic_view" + index).attr("src", "/Content/img/imgdefalt.jpg");
            $("#F_Image" + index).val("");
        
        $("#div" + index).hide();
    }
</script>